<template>
  <div class="detail">
    <van-nav-bar
      left-text="返回"
      @click-left="$router.back()"
      title="优购详情"
    />
    <div class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in detail.pics" :key="index">
          <img :src="item.pics_big" alt="" />
        </van-swipe-item>
      </van-swipe>
      <p style="color: red">￥{{ detail.goods_price }}</p>
      <h4>{{ detail.goods_name }}</h4>
      <div v-html="detail.goods_introduce"></div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.replace('/cart')"/>
      <van-action-bar-icon icon="share-o" text="分享" color="#ff5000" />
      <van-action-bar-button type="warning" text="加入购物车" @click="add"/>
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import api from "../api/index";
import { useRoute } from "vue-router";
import { useStore } from 'vuex';
import { Toast } from 'vant';
export default {
  setup() {
    const { params } = useRoute();
    const { commit } = useStore();
    const data = reactive({
      detail: {},
    });
    api.get(`/goods/detail?goods_id=${params.id}`).then((res) => {
      data.detail = res.message;
    });
    const add = () => {
       let obj = {
          check: false,
          img: data.detail.goods_big_logo,
          name: data.detail.goods_name,
          price: data.detail.goods_price,
          buyNum: 1,
          id: data.detail.goods_id
       }
       commit('saveCart',obj);
       Toast.success('添加成功！');
    }
    return {
      ...toRefs(data),
      add
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  .content {
    height: calc(100% - 96px);
    overflow: auto;
    .my-swipe {
      img {
        width: 100%;
      }
    }
  }
}
</style>